<template>
  <div class="detail">
    <v-app-bar
      hide-on-scroll
      color="deep-purple accent-4"
      dark
      style="position: fixed;top: 0;z-index:50;"
    >
      <v-btn icon @click="$router.back()">
        <v-icon>mdi-chevron-left</v-icon>
      </v-btn>
      <span class="font-weight-medium" style="font-size:1.2857rem">商品详情</span>
      <v-spacer></v-spacer>
    </v-app-bar>
    <div class="info-pro">
      <swiper :options="swiperOption" style="margin-top:4rem">
        <swiper-slide v-for="(item, index) in goods.imgs" :key="index">
          <img style="width:100%" :src="item.url" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <!-- 信息 -->
      <div class="mb-12">
        <v-card class="px-2">
          <div class="d-flex">
            <div>
              价格:
              <span style="font-size: 24px;color:#FF0036">￥{{goods.CNY/100}}  </span>
              积分:
              <span style="font-size: 24px;color:#FF0036">{{goods.point}}</span>
            </div>
            <v-spacer></v-spacer>
            <div style="line-height:2.5714rem">库存:{{goods.sum}}</div>
          </div>
          <div>{{goods.name}}</div>
        </v-card>
        <v-card class="px-2 my-1">
          <v-card-title primary-title>商品详情</v-card-title>
          <v-card-text class="card-img-edit" v-html="goods.info"></v-card-text>
        </v-card>
      </div>
    </div>
    <!-- 下方按钮 -->
    <van-goods-action>
      <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push(`/cart`)" />
      <van-goods-action-button color="#7232dd" type="warning" text="加入购物车" @click="add(v)" />
    </van-goods-action>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { Dialog } from "vant";
export default {
  props: {
    id: {}
  },
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        pagination: {
          el: ".swiper-pagination"
        }
      },
      goods: {},
      v: {}
    };
  },
  methods: {
    fetch() {
      const info = {
        cmd: 0,
        val: {
          token: localStorage.token,
          table: "items",
          ID: this.id
        }
      };
      this.$axios.post("q.php", info).then(res => {
        if (res.data.result) {
          res.data.result.formatData();
          const tmp = res.data.result[0];
          // console.log(res.data[0]);
          this.goods = res.data.result[0];
          this.v = {
            ID: res.data.result[0].ID,
            name: res.data.result[0].name,
            img: res.data.result[0].imgs[0].url,
            CNY: res.data.result[0].CNY,
            point: res.data.result[0].point
          };
        }
      });
    },
    add(v) {
      this.$store.dispatch("addCar", v);
      Dialog.confirm({
        title: "成功加入购物车",
        message: "客官O ^ ~ ^ O您接下来要做什么呢（*^_^*）",
        confirmButtonText: "不差钱!我要去结算了",
        cancelButtonText: "别烦我!我还要逛逛"
      })
        .then(() => {
          this.$router.push("/cart");
        })
        .catch(() => {
          this.$router.back();
        });
    },
    toCar() {
      this.$router.push("/cart");
    },
    ...mapActions(["addCar"])
  },
  computed: {
    ...mapState({
      car: state => state.car.list
    })
  },
  created() {
    this.fetch();
  }
};
</script>

<style lang="scss">
.card-img-edit {
  img {
    max-width: 26.4286rem;
  }
}
</style>